<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Chengbo Zhang
  Date: 2023/2/27
  Time: 9:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站首页</title>
    <link rel="icon" href="../img/p7up.png" type="img/x-ico">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jQuery-3.6.2.min.js"></script>
</head>

<body>
<div class="justify-content-center">
    <div>
        <!-- 顶部导航与大图 -->
        <jsp:include page="top.jsp"/>
        <!-- 内容 -->
        <div class="content justify-content-center flex-wrap">
            <div>
                <!-- 关于我们 -->
                <div class="justify-content-center">
                    <div class="flex-wrap justify-content-start">
                        <!-- about us -->
                        <div class="us align-items-center">
                            <div class="flex-wrap">
                                <div>关于我们</div>
                                <div>about us</div>
                                <div>某某健身用品专卖店是由上市公司中高体股份有限公司和美国倍力公司合作成立的一家高度专业化、规模化、高档次经营健身俱乐部的合资公司，中体产业股份有限公司
                                    是国家体育总局控股的****体育上
                                    市公司，自1998年3月成立以来，始终致力于体育产业的经营与开发，并不断拓展体育市场经营领域，实现体育产业的多元化经营。
                                </div>
                            </div>
                        </div>
                        <!-- 简介 -->
                        <div class="simple align-items-center">
                            <div>
                                某某健身运动有限公司是由中国某某有限公司和美国某某公司合作成立的一家高度专业化、规模化、高档次经营健身俱乐部的合资公司，中国XX有限公司
                                是一家体育上市公司，自1998年3月成立以来，始终致力于体育产业的经营与开发，并不断拓展体育市场经营领域，实现体育产业的多元化经营......
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 私人教练 -->
                <div class="justify-content-center flex-wrap">
                    <div class="flex-wrap justify-content-center">
                        <!-- 标题 -->
                        <div class="own-title justify-content-center flex-wrap">
                            <div>私人教练</div>
                            <div>OUR TEAM</div>
                        </div>
                        <!-- 图片 -->
                        <div class="own-img justify-content-center">
                            <c:forEach items="${teacherModelList}" var="teacher" begin="0" end="2" varStatus="loop">
                                <div class="justify-content-center flex-wrap">
                                    <img src="${imageShowModelList[loop.count-1].imageMessage}">
                                    <div>${teacher.teacherName}</div>
                                    <div>${teacher.level}</div>
                                </div>
                            </c:forEach>

                        </div>
                        <!-- 文字 -->
                        <div class="own-word align-items-center">
                            <div>MORE+</div>
                        </div>
                    </div>
                    <!-- 底部文字 -->
                    <div class="justify-content-center">
                        <div class="isNow justify-content-space-between">
                            <div class="justify-content-start flex-wrap">
                                <div>与其计划明天不如从今天开始</div>
                                <div>lt is better to start today than to plan tomorrow</div>
                            </div>
                            <div class="align-items-center">
                                <div>MORE+</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 新闻资讯 -->
                <div class="flex-wrap justify-content-center">
                    <!-- 标题 -->
                    <div class="news-title justify-content-center flex-wrap">
                        <div>新闻资讯</div>
                        <div>NEWS</div>
                    </div>
                    <!-- 图片 -->
                    <div class="news-img justify-content-center">
                        <c:forEach varStatus="loop" begin="3" end="5" items="${teacherModelList}" var="teacher">
                            <div class="justify-content-center flex-wrap">
                                <img src="${imageShowModelList[loop.count+2].imageMessage}">
                                <div>${teacher.teacherName}</div>
                                <div>${teacher.level}</div>
                            </div>
                        </c:forEach>

                    </div>
                    <!-- 文字 -->
                    <div class="news-word align-items-center">
                        <div>MORE+</div>
                    </div>
                </div>
                <!-- form表单 -->
                <div class="justify-content-center">
                    <div class="justify-content-center">
                        <!-- 图片 -->
                        <div class="align-items-end">
                            <img src="../img/acfa5605108c3150158055c03e58b035.png">
                        </div>
                        <!-- 表单 -->
                        <div class="form align-items-center">
                            <div class="justify-content-start flex-wrap">
                                <div class=" align-items-center flex-wrap">
                                    <div>填表格可在私教带领下免费体验—次!</div>
                                    <div>
                                        请仔细填写好下方预约表格,我们的客服人员会在24小时内与您联系，谢谢您的支持与关注!
                                    </div>
                                </div>
                                <div class="justify-content-start flex-wrap">
                                    <div>
                                        <div>姓名</div>
                                        <input type="text">
                                    </div>
                                    <div>
                                        <div>电话</div>
                                        <input type="text">
                                    </div>
                                    <div>
                                        <div>邮箱</div>
                                        <input type="text">
                                    </div>
                                    <div>
                                        <div>内容</div>
                                        <input type="text">
                                    </div>
                                </div>
                                <div class=" align-items-center">
                                    <div>提交</div>
                                </div>
                                <div class=" align-items-center">
                                    <div>THANKS</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <jsp:include page="foot.jsp"/>
    </div>
</div>
</body>
</html>
